<template>
    <div :class="personInfoClass">
        <a-row>
            <a-col :span="windowFlag == true ? 15 : 24" class="home-left">
                <a-row class="articlesDiv">
                    <a-col :span="24">
                        <!-- 文章列表 -->
                        <h1 style="color:white">推荐阅读</h1>
                        <a-row class="articles" v-if="articles.length!=0">
                            <a-col
                                v-for="article in articles"
                                :key="article.id"
                                class="article"
                                :span="24"
                            >
                                <router-link
                                    :to="'/articleInfo/'+article.id"
                                >
                                    <a-col
                                        :span="windowFlag == true ? 15 : 24"
                                    >
                                        <a-row class="title">
                                            <h3>{{ article.articleTitle }}</h3>
                                        </a-row>
                                        <a-row class="intro">
                                            <p>{{ article.articleIntro }}</p>
                                        </a-row>
                                        <a-row class="tags">
                                            <router-link :to="tag.tagUrl" v-for="tag in article.tags"
                                                    :key="tag.id">
                                                <a-tag
                                                    
                                                    :color="tag.tagColor"
                                                >
                                                    {{ tag.tagName }}
                                                </a-tag>
                                            </router-link>
                                        </a-row>
                                        <a-row class="operation">
                                            <a-col :span="6">
                                                <a-icon type="like" />顶（{{
                                                    article.articleLike
                                                }}）
                                            </a-col>
                                            <a-col :span="6">
                                                <a-icon type="dislike" />踩（{{
                                                    article.articleDislike
                                                }}）
                                            </a-col>
                                            <a-col :span="4"></a-col>
                                            <a-col :span="8">{{
                                                article.createTime
                                            }}</a-col>
                                        </a-row>
                                    </a-col>
                                    <a-col
                                        class="cover"
                                        :span="windowFlag == true ? 9 : 0"
                                    >
                                        <img
                                            :src="article.articleCover"
                                            alt="暂无封面"
                                        />
                                    </a-col>
                                </router-link>
                            </a-col>
                            <a-col :span="24" class="article" v-if="page.total/page.pageSize>=1">
                                <a-pagination 
                                    v-model="page.pageNumber"
                                    size="small" 
                                    style="color:white;" 
                                    :total="page.total"
                                    :pageSize="page.pageSize"
                                    @change="onPageChange()"
                                />
                            </a-col>
                        </a-row>
                        <a-row class="articles" v-else>
                            <a-col class="article" :span="24">
                                <a-empty description="暂无数据"/>
                            </a-col>
                        </a-row>
                    </a-col>
                </a-row>
            </a-col>
            <a-col :span="windowFlag == true ? 9 : 24" class="home-right">
                <Sidebar></Sidebar>
            </a-col>
        </a-row>
    </div>
</template>

<script>
import Sidebar from "../Sidebar";
export default {
    props: ["windowFlag"],
    components: {
        Sidebar,
    },
    data() {
        return {
            page: {
                /* 当前页面 */
                pageNumber: 1,
                /* 总条数 */
                total: 0,
                /* 每页条数 */
                pageSize: 15,
            },
            /* 文章 */
            articles: [],
        };
    },
    computed: {
        personInfoClass() {
            if (this.windowFlag) {
                return "home";
            } else {
                return "home-small";
            }
        },
    },
    mounted(){
        this.getIndex();
    },
    methods: {
        /* 获取首页推荐文章 */
        getIndex(){
            this.$api.article.getIndex(this.page).then(res => {
                if(res.code==200){
                    this.page.pageNumber = res.data.page.pageNum;
                    this.page.pageSize = res.data.page.pageSize;
                    this.page.total = res.data.page.total;
                    this.articles = res.data.page.list;
                }else{
                    this.$message.error(res.message);
                }
            })
        },
        /* 分页切换回调函数 */
        onPageChange(){
            this.getIndex();
        }
    },
    
};
</script>

<style lang="less" scoped>
@import "@/assets/small_css/home_small.less";
.home {
    width: 100%;
    height: auto;
    .home-left {
        height: auto;
        padding: 20px;
        .articlesDiv {
            width: 80%;
            height: auto;
            float: right;
            .carousel {
                .ant-carousel {
                    .imgDiv {
                        height: 400px;
                        //background: rgb(235, 235, 235);
                        img {
                            max-height: 400px;
                        }
                    }
                    .slick-slide {
                        text-align: center;
                        height: 160px;
                        line-height: 160px;
                        background: #364d79;
                        overflow: hidden;
                    }
                }
            }
            .title {
                h1 {
                    text-align: left;
                    margin: 20px;
                    color: white;
                }
            }
            .articles {
                width: 100%;
                height: auto;
                .article {
                    width: 100%;
                    height: auto;
                    box-sizing: border-box;
                    padding: 10px 20px;
                    margin-bottom: 10px;
                    background: rgba(255, 255, 255, 0.8);
                    color: black;
                    a {
                        color: black;
                    }
                    .title {
                        h3 {
                            font-weight: 700;
                            text-align: left;
                            font-size: 22px;
                        }
                    }
                    .intro {
                        text-align: left;
                        p {
                            font-size: 18px;
                            text-indent: 2em;
                        }
                    }
                    .tags {
                        text-align: left;
                        margin-bottom: 5px;
                    }
                    .cover {
                        height: 100%;
                        img {
                            max-height: 100%;
                            max-width: 100%;
                        }
                    }
                }
            }
        }
    }
    .home-right {
        height: auto; 
    }
}

</style>